<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<%
    String sel1 = request.getParameter("sel1");
    String sel2 = request.getParameter("sel2");

    String jhlx = java.net.URLDecoder.decode(request.getParameter("jhlx"),"utf-8");//request.getParameter("jhlx");
    String rclx = java.net.URLDecoder.decode(request.getParameter("rclx"),"utf-8");
    String pclx = java.net.URLDecoder.decode(request.getParameter("pclx"),"utf-8");
    String bfsj = java.net.URLDecoder.decode(request.getParameter("bfsj"),"utf-8");
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Example</title>

    <style type="text/css">
        #container {
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<script src="../../js/jquery.min.js"></script>
<%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
<script src="../../js/joy.loader.js" modules="form,dataview"></script>
<script src="../../js/prj/main.js"></script>
<script src="code/highcharts.js"></script>
<script src="code/highcharts-more.js"></script>
<script src="code/modules/exporting.js"></script>
<script src="code/js/themes/grid-light.js"></script>
<div id="container"></div>
<center>
    <button id="plain">水平</button>
    <button id="inverted">垂直</button>
    <button id="polar">极面</button>
</center>


<script type="text/javascript">

    $().ready(function () {
        var sel1=<%=sel1%>;
        var sel2=<%=sel2%>;

        var jhlx="<%=jhlx%>";
        var rclx="<%=rclx%>";
        var pclx="<%=pclx%>";
        var bfsj="<%=bfsj%>";


        var title = "行业-人数(2017年,总数)";
        var totle = "人数";
//
//        if(sel1 =='1' && sel2=='4'){
//            title = "行业-资金";
//            totle = "已拨付金额";
//        }
//        if(sel1 =='1' && sel2=='5'){
//            title = "";
//            totle = "人数";
//        }
//        if(sel1 =='2' && sel2=='4'){
//            title = "计划-资金";
//            totle = "已拨付金额";
//        }
//        if(sel1 =='2' && sel2=='5'){
//            title = "计划-人数";
//            totle = "人数";
//        }
//        if(sel1 =='3' && sel2=='4'){
//            title = "人才-资金";
//            totle = "已拨付金额";
//        }

        //数据初始化
        var test;
        var chart;
        joy.postJSON("/html/ps/psquery/findPerByPlan.ht",{sel1:sel1,sel2:sel2,jhlx:jhlx,rclx:rclx,pclx:pclx,bfsj:bfsj}, function (resultObject) {
            var listX = resultObject.returnX; //x类型
            var listY = resultObject.returnY; //y类型
            var listZ = resultObject.returnZ; //y类型

//            var result=split_array(resultObject,resultObject.length/2);
            test(listX,listY,listZ,title,totle);
        });

        function split_array(arr, len) {
            var a_len = arr.length;
            var result = [];
            for (var i = 0; i < a_len; i += len) {
                result.push(arr.slice(i, i + len));
            }
            return result;
        }

        function test(result1,result2,result3,title,totle) {
            chart = Highcharts.chart('container', {
                plotOptions: {
                    column:{
                        dataLabels:{
                            enabled:true, // dataLabels设为true
//                            style:{
//                                color:'#D7DEE9'
//                            }
                        }
                    }
                },

                title: {
                    text: title
                },

                subtitle: {
                    text: ''
                },

                xAxis: {
                    categories: result1
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: totle
                    },
                    labels: {
                        enabled: true
                    }
                },
                colors:['#a6c96a','#92A8CD'],

                series: [{
                    name:'2017年',
                    type: 'column',
                    data: result3,

                },{
                    name:'总数',
                    type: 'column',
                    data: result2,
                }]
            });
        }

        $('#plain').click(function () {
            chart.update({
                chart: {
                    inverted: false,
                    polar: false
                },
                subtitle: {
                    text: ''
                }
            });
        });

        $('#inverted').click(function () {
            chart.update({
                chart: {
                    inverted: true,
                    polar: false
                },
                subtitle: {
                    text: ''
                }
            });
        });


        $('#polar').click(function () {
            chart.update({
                chart: {
                    inverted: false,
                    polar: true
                },
                subtitle: {
                    text: ''
                }
            });
        });

    })


</script>
</body>
</html>
